<template>
  <div class="user">
    <!-- 我的资料 -->
    <div class="header">
      <NavBar title="我的资料" path="/Home/My"></NavBar>
    </div>
    <div class="content">
      <div class="topContent" @click="avatar">
        <van-cell title="头像" is-link arrow-direction> </van-cell>
        <div class="image">
          <img :src="baseURL + userInfo.avatar" alt="" />
        </div>
      </div>
      <div class="middleContent">
        <div class="topContent middleTop" @click="nickName">
          <van-cell
            title="昵称"
            :value="userInfo.nickname"
            is-link
            arrow-direction
          >
          </van-cell>
        </div>
        <div class="topContent middleTop">
          <van-cell
            title="性别"
            :value="genderData[userInfo.gender]"
            is-link
            arrow-direction
            @click="show = true"
          >
          </van-cell>
        </div>
        <div class="topContent middleTop" @click="areaShow">
          <van-cell
            title="地区"
            :value="areaData.city_list[userInfo.area]"
            is-link
            arrow-direction
          >
          </van-cell>
        </div>
        <div class="topContent middleTop" @click="Intro">
          <van-cell
            title="个人简介"
            :value="userInfo.intro"
            is-link
            arrow-direction
          >
          </van-cell>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-button type="default" size="large" @click="out">退出登录</van-button>
    </div>
    <!-- 性别面板 -->
    <van-popup :close-on-click-overlay="false" v-model="show" position="bottom">
      <van-picker
        show-toolbar
        :columns="GenderData"
        :default-index="userInfo.gender"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 地区面板 -->
    <van-popup v-model="areashow" position="bottom">
      <van-area
        :area-list="areaData"
        columns-num="2"
        :value="userInfo.area"
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </van-popup>
    <!-- 退出登录弹出框 -->
    <outShow ref="show"></outShow>
  </div>
</template>
<script>
import areaData from '../../../utils/area'
import { mapState } from 'vuex'
import { editUser } from '@/api/editUser.js'
import outShow from './outShow'
export default {
  computed: { ...mapState(['userInfo', 'genderData']) },
  components: { outShow },
  data () {
    return {
      baseURL: process.env.VUE_APP_BASEURL,
      show: false,
      GenderData: ['未知', '男', '女'],
      areashow: false,
      areaData: areaData
    }
  },
  methods: {
    // 跳转修改昵称页面
    nickName () {
      this.$router.push('/Home/Info?prop=nickname')
    },
    // 跳转修改个人简介页面
    Intro () {
      this.$router.push('/Home/Info?prop=intro')
    },
    // 跳转修改头像页面
    avatar () {
      this.$router.push('/Home/Info?prop=avatar')
    },
    // 地区面板弹出层
    areaShow () {
      this.areashow = true
    },
    // 地区面板取消按钮
    areaCancel () {
      this.areashow = false
    },
    // 地区面板确定按钮
    async areaConfirm (data) {
      this.$toast.loading('加载中...')
      await editUser({ area: data[1].code })
      this.$store.dispatch('setUserInfo')
      this.$toast.success('修改成功')
      this.areashow = false
    },
    // 性别面板
    async onConfirm (value, index) {
      // console.log(res, index)
      // 调用接口发起请求需要一定的响应时间
      // 添加加载效果
      this.$toast.loading('加载中...')
      // 调用接口发起请求修改参数
      await editUser({ gender: index })
      // console.log(res)
      // 通过调用store内actions的方法 , 使用dispatch触发  保存修改后的用户信息到state中 , 并重新渲染页面数据
      this.$store.dispatch('setUserInfo')
      // 显示修改完成
      this.$toast.success('修改成功')
      // 修改成功后关闭弹层
      this.show = false
    },
    // 取消按钮关闭弹层
    onCancel () {
      this.show = false
    },
    // 退出登录显示弹窗
    out () {
      this.$refs.show.show = true
    }
  }
}
</script>
<style lang="less" scoped>
.user {
  height: 100vh;
  background: #f7f4f5;
  .header {
    height: 88px;
    padding-top: 44px;
    background-color: #fff;
    /deep/ .van-nav-bar__title {
      font-weight: 600;
      opacity: 1;
      font-size: 18px;
    }
  }
  .content {
    padding: 18px 15px 0;
    .topContent {
      position: relative;
      width: 345px;
      height: 60px;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
      padding-top: 10px;
      overflow: hidden;
      .image {
        position: absolute;
        height: 40px;
        width: 40px;
        top: 10px;
        right: 32px;
        border-radius: 20px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .van-cell {
        opacity: 1;
        font-size: 10px;
        // font-weight: 600;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #181a39;
      }
      /deep/.van-cell::after {
        border: 0;
      }
    }
    .middleContent {
      margin-top: 10px;
      border-radius: 8px;
      overflow: hidden;

      .middleTop {
        border-radius: 0;
      }
    }
  }
  .footer {
    text-align: center;
    padding: 15px 15px 0;

    /deep/ .van-button--default {
      border-radius: 8px;
      font-weight: 400;
      text-align: left;
      color: #e40137;
    }
  }
  .image {
    height: 10px;
    width: 10px;
  }
}
</style>
